<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white solids-bottom text-darkGray">
			<block slot="content">
				{{detail.name}}
			</block>
			<block slot="right"></block>
		</cu-custom>
		<rich-text :nodes="detail.zt0" v-if="detail.zt0!=''"></rich-text>
		<view style="position: relative;">
			<swiper :autoplay="autoplay" :indicator-dots="indicatorDots" style="height: 56.1vw;" :current="index" circular="false" @change="swiperChange" @animationfinish="animationfinish">
				<swiper-item v-for="(img,key) in detail.imgarray" :key="key">
					<image :src="img" :data-src="img" style="width: 100%;height: 56.1vw;" mode="aspectFit"  @tap="ViewImage3" />
				</swiper-item>
			</swiper>
			<view style="width:200upx;font-size: 28upx;color:#fff;background:rgba(0,0,0,0.65);padding: 12upx 0;text-align: center;position: absolute;bottom: 0;left: 0;">
			{{detail.labelarray[current]}}
			</view>
		</view>
		<rich-text :nodes="detail.zt1" v-if="detail.zt1!=''"></rich-text>
		<rich-text :nodes="detail.zt2" v-if="detail.zt2!=''"></rich-text>
		<rich-text :nodes="detail.zt3" v-if="detail.zt3!=''" @tap="JS"></rich-text>
		<rich-text :nodes="detail.jn0" v-if="detail.jn0!=''"></rich-text>
		<rich-text :nodes="detail.jn1" v-if="detail.jn1!=''"></rich-text>
		<rich-text :nodes="detail.jn2" v-if="detail.jn2!=''"></rich-text>
		<rich-text :nodes="detail.jn3" v-if="detail.jn3!=''"></rich-text>
		<!-- <rich-text :nodes="detail.jn4" v-if="detail.jn4!=''"></rich-text> -->
		<rich-text :nodes="detail.jn5" v-if="detail.jn5!=''"></rich-text>
		<rich-text :nodes="detail.jn6" v-if="detail.jn6!=''"></rich-text>
		<rich-text :nodes="detail.jn7" v-if="detail.jn7!=''"></rich-text>
	</view>
</template>

<script>
	var graceRichText = require("../../../static/richText.js");
	export default {
		data() {
			return {
				detail: "",
				index: 0, //当前显示索引
				indicatorDots: false, //显示指示点
				autoplay: false,//自动轮播
				current:0,
			}
		},
		onLoad(options) {
			// #ifdef MP-WEIXIN
			var _this = this;
			wx.cloud.init();
			const db = wx.cloud.database()
			if (options && options.name) {
				db.collection('wiki_peoples').where({
				  name: options.name
				}).get({
				  success: res => {
					console.log('[数据库] [查询记录] 成功: ', res.data[0]);
					_this.detail = res.data[0];
					_this.detail.imgarray = [];
					_this.detail.labelarray = [];
					let imgobj = _this.detail.imgObject.split(";");
					imgobj.forEach(function(item){
						_this.detail.imgarray.push(JSON.parse(item).src);
						_this.detail.labelarray.push(JSON.parse(item).kind);
					})
					_this.detail.zt1 = _this.detail.zt1
					.replace(/class="wikitable" style="/g,'style="margin: 0;background-color: transparent;border: 0px solid #fff;border-collapse: collapse;color: #fff;')
					.replace('width="20" height="20"','style="width:20px;height:20px;margin-right:5px;vertical-align: middle;"')
					.replace(/<td style="width:80px"/g,'<td width="80"')
					.replace(/<td/g,'<td style="border: 1px solid #fff;padding:6px;"')
					.replace(/<th style="width:100px"/g,'<th width="100"')
					.replace(/<th/g,'<th style="border: 1px solid #fff;padding:6px;background-color: rgba(0,0,0,0.56);"');
					_this.detail.jn0 = _this.ReplaceHtml(_this.detail.jn0);
					_this.detail.jn1 = _this.ReplaceHtml1(_this.detail.jn1);
					_this.detail.jn2 = _this.ReplaceHtml(_this.detail.jn2);
					_this.detail.jn3 = _this.ReplaceHtml(_this.detail.jn3);
					_this.detail.jn4 = _this.ReplaceHtml(_this.detail.jn4);
					_this.detail.jn5 = _this.ReplaceHtml(_this.detail.jn5);
					_this.detail.jn6 = _this.ReplaceHtml(_this.detail.jn6);
					_this.detail.jn7 = _this.ReplaceHtml(_this.detail.jn7);
					_this.detail.zt0 = '<div style="color:#fff;background-color: rgba(72, 72, 72, 0.7);padding: 10px;margin: 5px;width: calc(100vw-30px);">'+_this.detail.zt0+'</div>';
					_this.detail.zt1 = '<div style="color:#fff;background-color: rgba(72, 72, 72, 0.7);padding: 10px;margin: 5px;width: calc(100vw-30px);">'+_this.detail.zt1+'</div>';
					_this.detail.zt2 = '<div style="color:#fff;background-color: rgba(72, 72, 72, 0.7);padding: 10px;margin: 5px;width: calc(100vw-30px);">'+_this.detail.zt2+'</div>';
					_this.detail.zt3 = '<div style="color:#fff;background-color: rgba(72, 72, 72, 0.7);padding: 10px;margin: 5px;width: calc(100vw-30px);">'+_this.detail.zt3+'</div>';
					//_this.detail.jn0 = '<div style="color:#fff;background-color: rgba(72, 72, 72, 0.7);padding: 10px;margin: 5px;width: calc(100vw-30px);">'+_this.detail.jn0+'</div>';
					
				  },
				  fail: err => {
					uni.showToast({
					  icon: 'none',
					  title: '查询记录失败'
					})
					console.error('[数据库] [查询记录] 失败：', err)
				  }
				}) 
			}
			// #endif
		},
		methods: {
			getMessage(event) {
				uni.showModal({
					content: JSON.stringify(event.detail),
					showCancel: false,
					current:0
				});
			},
			swiperChange:function(e){
				console.info(e.detail);
				this.current = e.detail.current;
			},
			animationfinish:function(e){
				console.info(e.detail);
			},
			ViewImage3(e) {
				var current = e.target.dataset.src;
				console.info(current);
				uni.previewImage({
					urls: this.detail.imgarray,
					current: current,
				});
			},
			JS(e){
				console.info(123);
			},
			ReplaceHtml(str){
				str = str||"";
				str = str
					.replace(/class="iteminfo" style=\"(.*?)\"/g,'style="display:none;"')
					.replace(/class="wikitable"/g,'style="margin: 0;background-color: transparent;border: 0px solid #fff;border-collapse: collapse;color: #fff;width:100%;')
					.replace(/class="tj-btl"/g,'style="background-color:rgba(0,0,0,0.56);color:#fff;font-weight:bold;padding:6px 10px;margin-bottom:5px;"')
					.replace(/<th style=\"(.*?)\"/g,'<th width="80"')
					.replace(/<td style=\"(.*?)\"/g,'<td width="100"')
					.replace(/<td/g,'<td style="border: 1px solid #fff;padding:6px;text-align:center;"')
					.replace(/<th/g,'<th style="border: 1px solid #fff;padding:6px;background-color: rgba(0,0,0,0.56);text-align:center;"')
				return '<div style="color:#fff;background-color: rgba(72, 72, 72, 0.7);padding: 10px;margin: 5px;width: calc(100vw-30px);">'+str+'</div>';
			},
			ReplaceHtml1(str){
				str = str||"";
				str = str
					.replace(/<tr><td><\/td><\/tr>/g,'')
					.replace(/class="wikitable"/g,'style="margin: 0;background-color: transparent;border: 0px solid #fff;border-collapse: collapse;color: #fff;width:100%;"')
					.replace(/class="wikitable mwiki_hide"/g,'style="display:none;"')
					.replace(/class="tj-btl"/g,'style="background-color:rgba(0,0,0,0.56);color:#fff;font-weight:bold;padding:6px 10px;margin-bottom:5px;"')
					.replace(/<th style=\"(.*?)\"/g,'<th width="80"')
					.replace(/<td style=\"(.*?)\"/g,'<td width="100"')
					.replace(/<td/g,'<td style="text-align:center;"')
					.replace(/<th/g,'<th style="border: 1px solid #fff;padding:6px;background-color: rgba(0,0,0,0.56);text-align:center;"')
					.replace(/class="bg-gjfw"/g,'style="padding:10px 20px 10px 0px;"')
					/*.replace(/<td style=\"(.*?)\"><div class="gjfw-1">/g,'<td><div class="gjfw-1">')
					.replace(/<td style=\"(.*?)\"><div class="gjfw-2">/g,'<td><div class="gjfw-2">') */
					.replace(/class="gjfw-1"/g,'style="float: left;margin: 2px;width: 11px;height: 11px;border: 2px solid #fff;"')
					.replace(/class="gjfw-2"/g,'style="float: left;margin: 2px;width: 15px;height: 15px;background:#fff;"');
				return '<div style="color:#fff;background-color: rgba(72, 72, 72, 0.7);padding: 10px;margin: 5px;width: calc(100vw-30px);">'+str+'</div>';
			}
		}
	}
</script>

<style lang="less">

</style>
